<template>
  <div>
    <div class="nav">
      <div class="logo" @click="goparMan()">
        <img src="../images/main/logo.png" alt>
      </div>
      <nav>
        <div
          v-if="roleList.search('合伙人管理') != -1"
          :class="navbg == 0 ? 'name active' : 'name'"
          @click="goparMan()"
        >合伙人管理</div>
        <div
          v-if="roleList.search('服务商管理') != -1"
          :class="navbg == 1 ? 'name active' : 'name'"
          @click="goServer()"
        >服务商管理</div>
        <div
          v-if="roleList.search('财务管理') != -1"
          :class="navbg == 2 ? 'name active' : 'name'"
          @click="goFinance()"
        >财务管理</div>
        <div
          v-if="roleList.search('活动管理') != -1"
          :class="navbg == 3 ? 'name active' : 'name'"
          @click="goActivity()"
        >活动管理</div>
        <div :class="navbg == 4 ? 'name active' : 'name'" @click="goUserMan()">用户管理</div>
        <!--  -->
        <div
          v-if="$cookie.get('userAccount') == 'admin'"
          :class="navbg == 5 ? 'name active' : 'name'"
          @click="goStaffMan()"
        >员工管理</div>
      </nav>
      <div class="admin">
        <div class="user" @mouseover="showCtrl()" @mouseout="hideCtrl()">
          <!-- <img :src="$cookie.get('img') || '../images/main/user.png'" alt> -->
          <img src="../images/main/photo.png" alt>
          <div class="username" :title="$cookie.get('name')">{{$cookie.get('name')}}</div>
        </div>
        <div class="lists" v-show="ctrl" @mouseover="showCtrl()" @mouseout="hideCtrl()">
          <div class="list first" @click="rePass()">修改密码</div>
          <div class="list" @click="loginOut()">退出登录</div>
        </div>
      </div>
    </div>
    <div class="body">
      <router-view :key="activeDate"/>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      employs: {
        goparMan: {
          label: "合伙人管理",
          employ: false
        },
        goServer: {
          label: "服务商管理",
          employ: false
        },
        goFinance: {
          label: "财务管理",
          employ: false
        },
        goActivity: {
          label: "活动管理",
          employ: false
        },
        goUserMan: {
          label: "用户管理",
          employ: true
        },
        goStaffMan: {
          label: "员工管理",
          employ: false
        }
      },
      roleList: "",
      ctrl: false,
      navbg: 0,
      activeDate: "",
      routerList: [
        {
          label: "合伙人管理",
          routerUrl: "/main",
          navbg: 0
        },
        {
          label: "服务商管理",
          routerUrl: "/main/server",
          navbg: 1
        },
        {
          label: "财务管理",
          routerUrl: "/main/finance",
          navbg: 2
        },
        {
          label: "活动管理",
          routerUrl: "/main/activity",
          navbg: 3
        },
        {
          label: "用户管理",
          routerUrl: "/main/userMan",
          navbg: 4
        },
        {
          label: "员工管理",
          routerUrl: "/main/staffMan",
          navbg: 5
        }
      ]
    };
  },
  created: function() {},
  mounted: function() {
    this.initNav(this.$route.name);
    this.getRole();
    if(this.$route.path.search('staffMan') != -1) {
      if(this.$cookie.get('userAccount') != 'admin') {
this.$router.push({
        path: "/"
      });
      }
      
    }
  },
  methods: {
    /**
     *  获取权限
     */
    getRole: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/selectByEmployeeId`,
        data: qs.stringify({
          empId: that.$cookie.get("pid")
        })
      }).then(res => {
        let arr = res.data.data;
        let role = [];
        for (let i = 0; i < arr.length; i++) {
          role.push(arr[i].name);
        }
        that.roleList = role.toString();
      });
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysEmployee/checkStates`,
        data: qs.stringify({
          empId: that.$cookie.get("pid")
        })
      }).then(res => {
        if (res.data.code != 0) {
          that.$alert(res.data.msg);
          that.$router.push({
            path: "/"
          });
          that.$cookie.delete("pid");
        }
      });
    },
    /**
     * 退出登录
     */
    loginOut: function() {
      this.$router.push({
        path: "/"
      });
      this.$cookie.delete("pid");
    },
    /**
     * 修改密码
     */
    rePass: function() {
      this.$router.push({
      path: "/main/uppass",
      name:'uppass'
      });
    },
    showCtrl: function() {
      this.ctrl = true;
    },
    hideCtrl: function() {
      this.ctrl = false;
    },
    goparMan: function() {
      let rname = "parMan";
      if (this.roleList.search("合伙人管理") != -1) {
        rname = "parMan";
      } else if (this.roleList.search("服务商管理") != -1) {
        rname = "server";
      } else if (this.roleList.search("财务管理") != -1) {
        rname = "finance";
      } else if (this.roleList.search("活动管理") != -1) {
        rname = "activity";
      } else {
        rname = "userMan";
      }
      this.initNav(rname);
    },
    goServer: function() {
      this.navbg = 1;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/server"
      });
    },
    goFinance: function() {
      this.navbg = 2;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/finance"
      });
    },
    goActivity: function() {
      this.navbg = 3;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/activity"
      });
    },
    goUserMan: function() {
      this.navbg = 4;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/userMan"
      });
    },
    goStaffMan: function() {
      this.navbg = 5;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/staffMan"
      });
    },
    initNav: function(actionName) {
      switch (actionName) {
        case "parMan":
          this.navbg = 0;
          this.$router.push({
            path: "/main"
          });
          break;
        case "server":
          this.navbg = 1;
          this.$router.push({
            path: "/main/server"
          });
          break;
        case "finance":
          this.navbg = 2;
          this.$router.push({
            path: "/main/finance"
          });
          break;
        case "activity":
          this.navbg = 3;
          this.$router.push({
            path: "/main/activity"
          });
          break;
        case "userMan":
          this.navbg = 4;
          this.$router.push({
            path: "/main/userMan"
          });
          break;
          case "staffMan":
          this.navbg = 5;
          if(this.$cookie.get('userAccount') == 'admin') {
            return false
          }
          this.$router.push({
            path: "/main/staffMan"
          });
          break;
      }
    }
  },
  watch: {
    $route: {
      handler: function(val) {
        console.log(val);
        this.getRole();
      },
      deep: true
    },
    "$store.state.employ"(val) {
      // console.log(val)
      let navs = [];
      for (let i = 0, len = val.length; i < len; i++) {
        let item = val[i];
        if (item.pid == 0) {
          navs.push(item);
        }
      }
      for (let i = 0, len = navs.length; i < len; i++) {
        let item = navs[i];
        for (let j in this.employs) {
          if (item.name == this.employs[j].label) {
            this.employs[j].employ = true;
          }
        }
      }
      if (this.$cookie.get("userAccount") == "admin") {
        this.employs.goStaffMan.employ = true;
      }
      for (let k in this.employs) {
        if (this.employs[k].employ) {
          this.routerList.forEach(element => {
            if (this.employs[k].label === element.label) {
              this.navbg = element.navbg;
              this.$router.push({
                path: element.routerUrl
              });
            }
          });
          break;
        }
      }
    }
  }
};
</script>
<style scoped>
.nav {
  height: 109px;
  background: #353948;
  border: 1px solid #353948;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.logo {
  width: 187px;
  height: 72px;
  margin: 20px 93px 19px 13px;
  float: left;
  cursor: pointer;
}
.logo img {
  width: 100%;
}
nav {
  /* width: 1000px; */
  width: 780px;
  margin-right: 128px;
  display: flex;
  color: #fff;
  line-height: 110px;
  float: left;
  display: flex;
}
.name {
  flex: 0 0 130px;
  cursor: pointer;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}
.admin {
  /* width: 160px; */
  float: right;
  margin-right: 100px;
  color: #fff;
  cursor: pointer;
  background: #085dab;
  border: 1px solid #085dab;
  /* width: 159px; */
  height: 109px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 999;
}
@media (max-width: 1380px) {
  .admin {
    margin-right: 0;
  }
}
.user {
  background: #24476f;
  /* width: 128px; */
  height: 62px;
  padding: 23px 16px;
  line-height: 62px;
}
.user img {
  border: 1px solid #979797;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  float: left;
}
.username {
  margin-left: 10px;
  float: left;
  overflow: hidden;
  height: 66px;
  max-width: 80px;
  line-height: 33px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* display: flex; */
  justify-content: center;
  align-items: Center;
}
.list {
  height: 40px;
  border: 1px solid #888888;
  /* width: 160px; */
  background: #24476f;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #ffffff;
}
.first {
  border-bottom: 0px;
}
.active {
  background-image: url("../images/main/navbg.png");
  background-size: 123px 69px;
  background-repeat: no-repeat;
  /* background-position: 22px 20px; */
  background-position: center;
}
</style>

